<!--
  App.vue - 应用根组件
  这是整个应用的最外层容器，就像是房子的外墙
  所有的页面内容都会在这个组件内部显示
-->
<template>
  <!-- 应用的主容器，包裹整个应用 -->
  <div id="app">
    <!-- 
      router-view是路由视图组件，用于显示当前路由对应的页面
      比如访问首页时显示工作台，访问预览页时显示预览内容
    -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
/**
 * 根组件脚本部分
 * 这里负责整个应用的基础逻辑
 * 目前只需要提供路由渲染功能，所以代码很简单
 */
</script>

<style>
/**
 * 全局样式设置
 * 这些样式会影响整个应用的外观
 */

/* 
 * 重置所有HTML元素的默认样式
 * 确保在不同浏览器中显示效果一致
 */
* {
  margin: 0;        /* 移除默认外边距 */
  padding: 0;       /* 移除默认内边距 */
  box-sizing: border-box;  /* 使用边框盒模型，让尺寸计算更准确 */
}

/* 
 * 应用主容器样式
 * 设置应用占满整个浏览器窗口
 */
#app {
  width: 100vw;     /* 宽度占满视窗宽度 */
  height: 100vh;    /* 高度占满视窗高度 */
  font-family: 'Microsoft YaHei', sans-serif;  /* 设置默认字体为微软雅黑 */
}
</style>